<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-注册</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>

    <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/host.js') }}"></script>
<script>
    window.onload=function () {
        let vm = new Vue({

        el: '.app',
    // 修改Vue读取变量的语法
        host : host,
        delimiters: ['[[', ']]'],
        data: {
        username: '',
        code:'',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url:'',
        sms_code:'',
        sms_code_tip:'获取短信验证码',


        error_sms_code:false,
        error_code:false ,
        error_username: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_password3:false,
        sending_flag:false,
        error_name_message: '',
        error_mobile_message: '',
        error_code_message:'',
        error_sms_code_message:'',
    },
    //加载完成后就执行生成代码去访问后台拿图片,并且就已经命名了url可以写在图片标签里
    mounted(){
        this.generate_image_code();
        },
    methods: {

        check_username(){
            let de = /^[a-zA-Z0-9_-]{5,20}$/;
            if (de.test(this.username)==true){
                //先校验是有效的用户名后，再进行判断是否已有，axios来吧
                //1.拼接url
                let url ='usernames/' + this.username + '/count/';
                //2.召唤axios
                axios.get(url,{responseType:'json'}).then(response=>{
                    if (response.data.count >= 1){
                        this.error_name_message = '经过本axios查找该用户已存在呢';
                        this.error_username = true;

                    }else {
                        this.error_username = false;
                    }
                }).catch(error=>{console.log(error.response)});
{#                this.error_username = false;#}
            }else{
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_username = true;
            }
        },
{#         校验#}
        check_password(){
            let de = /^[a-zA-Z0-9_-]{8,20}$/;
            if (de.test(this.password)){
{#                匹配上不显示#}
                this.error_password = false;
            }else{
                this.error_password = true;
            }
        },

        check_password2(){
            if (this.password != this.password2 ){
                this.error_password2 = true;
{#                if (this.password==0 || this.password2==0){#}
{#                    this.error_password3 = true;#}
{#                }#}
            }else{
                this.error_password2 = false;
            }
        },

        check_mobile(){
            let de =/^1[3-9]\d{9}$/;
            if (de.test(this.mobile)){
                //如果书写正确，再判断是否重复
                let url = '/mobiles/' + this.mobile +'/count/';
                axios.get(url,{responseType:'json'}).then(response=>{
                    if(response.data.count >= 1) {
                        this.error_mobile_message ='手机号已注册！';
                        this.error_mobile = true;

                    }else{
                        this.error_mobile = false;
                    }
                }).catch(error=>{
                    console.error(error.response);
                });

{#                this.error_mobile = false;#}
            }else {
                this.error_mobile_message = '您输入的手机号格式不对';
                this.error_mobile = true;
            }
        },
        //取反 判断
        check_allow(){
            if (!this.allow){
                this.error_allow = true;
            }else {
                this.error_allow = false;
            }
        },
        //验证短信验证码
        check_sms_code(){
            if (this.sms_code.length != 4){
                this.error_sms_code_message = '请填写四位数短信验证码';
                this.error_sms_code = true
            }else {
                //如果确实填写了规范的短信验证码
                //判断是否正确 axios
                let check_sms_url = '/check_sms_code/' +this.mobile +'/'+ this.sms_code + '/';
                axios.get(check_sms_url,{responseType:"json"}).then(response=>{
                    if (response.data.ret == 0){
                        //验证成功
                        this.error_sms_code = false;
                    }else {
                        this.error_sms_code_message = '短信验证码输入错误';
                        this.error_sms_code = true;
                    }
                }).catch();


            }
        },
        //信息正确,发送axios发送验证码
        send_sms_code(){
            //点击按钮就检查这两项， 手机号和验证码是否正确，如果不正确则返回
            this.check_mobile();
            this.check_code();
            if (this.error_mobile == true || this.error_code==true){
                return;
            }
            if (this.sending_flag == true){
                return
            }
            //运行一次变为真,下次则不能再发起请求了，避免重复发送
            this.sending_flag = true;
            //验证通过就发送短信验证码，通过axios
            //拼接url   通过查询传参数 手机号 图片验证码 uuid
            let sms_url = '/sms_codes/' + this.mobile +'/?code=' + this.code +'&uuid='+ this.uuid;
            axios.get(sms_url,{responseType:'json'}).then(response=>{
                if (response.data.code1 == '0'){
                    //发送成功 ,开始倒计时5分钟
                    let num = 300;
                    let t = setInterval(()=>{
                        if (num == 1){
                            clearInterval(t);
                            this.sms_code_tip = '获取短信验证码';
                            //表示可以再次发送
                            this.sending_flag = false;
                    }else {
                            num = num-1;
                            this.sms_code_tip = '请在'+ num + '秒内输入';

                        }
                    },1000);

                }
                else if (response.data.code1 == '4004'){
                        //表示验证码失效了
                        this.error_code_message = response.data.errmsg;
                        this.error_code = true
                    }
                else if (response.data.code1 == '4001'){
                        this.error_code_message = response.data.errmsg;
                        this.error_sms_code = true;
                    }
                else if (response.data.code1 == '2'){
                    this.error_sms_code_message = response.data.errmsg;
                    this.error_sms_code = true;
                }
            }).catch()
        },


        //验证图片验证码是否输入
        check_code(){
            //非真即假
            if (!this.code){
                this.error_code_message = '请输入图片验证码';
                this.error_code = true;
            }else{
                //如果有数据则执行：
{#                this.error_code = false;#}
                //发起axios到后台redis数据库检测是否存在
                //1拼接url
                let code_url = '/testcode/' + this.uuid + '/';
                //2.axions

                axios.get(code_url,{responseType:"json"}).then(response=>{
                    if (response.data.text == this.code.toLocaleLowerCase()){
                        this.error_code = false;

                    }else{
                        this.error_code_message = '图片验证码输入错误,请您重新输入';
                        this.error_code = true;
                    }
                }).catch();
            }
        },


        // 监听表单提交事件
        on_submit(){
            this.check_allow();
            this.check_mobile();
            this.check_password();
            this.check_password2();
            this.check_username();
            this.check_code();
            this.check_sms_code();
            if (this.error_username==true||this.error_password==true||
            this.error_password2_message==true||this.error_mobile==true||
            this.error_allow==true||this.error_code==true||this.error_sms_code==true) {
                window.event.returnValue = false;
            }


        },
        generate_image_code(){
            //生成uuid
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/'

        },


    }
});
    }

</script>
</head>
<body>
    <div class="app">
        <h1>胡先生专用版本</h1>
        <div class="register_con">
            <div class="l_con fl">
                <a href="{{ url('index') }}" class="reg_logo"><img src="../static/images/logo.png"></a>
                <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
                <div class="reg_banner"></div>
            </div>

            <div class="r_con fr">
                <div class="reg_title clearfix">
                    <h1>用户注册</h1>
                    <a href="/login/">登录</a>
                </div>
                <div class="reg_form clearfix">
                    <form method="post" class="register_form" @submit="on_submit">
                    <ul>
                        <li>
                            <label>用户名:</label>
                            <input type="text" name="user_name" id="user_name" v-model="username" @blur="check_username">
                            <span class="error_tip" v-show="error_username"> [[error_name_message]]</span>
                        </li>
                        <li>
                            <label>密码:</label>
                            <input type="password" name="pwd" id="pwd" v-model="password" @blur="check_password">
                            <span class="error_tip" v-show="error_password">请输入8-20位的密码</span>
                        </li>
                        <li>
                            <label>确认密码:</label>
                            <input type="password" name="cpwd" id="cpwd" v-model="password2" @blur="check_password2">
                            <span class="error_tip" v-show="error_password2">两次输入的密码不一致</span>
                            <span class="error_tip" v-show="error_password3">请重新输入</span>
                        </li>
                        <li>
                            <label>手机号:</label>
                            <input type="text" name="phone" id="phone" v-model="mobile" @blur="check_mobile">
                            <span class="error_tip" v-show="error_mobile" >[[error_mobile_message]]</span>
                        </li>
                        <li>
                            <label>图形验证码:</label>
                            <input type="text" v-model="code" name="pic_code" id="pic_code" class="msg_input" @blur="check_code" >
                            <img :src='image_code_url' alt="图形验证码" class="pic_code" @click="generate_image_code" >
                            <span class="error_tip" v-show="error_code">[[error_code_message]]</span>
                        </li>
                        <li>
                            <input type="text" v-show="false" name="uuida" v-model="this.uuid">

                        </li>
                        <li>
                            <label>短信验证码:</label>
                            <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="sms_code" @blur="check_sms_code">
                            <a @click="send_sms_code" class="get_msg_code">[[sms_code_tip]]</a>
                            <span class="error_tip" v-show="error_sms_code">[[error_sms_code_message ]]</span>
                        </li>
                        <li class="agreement">
                            <input type="checkbox" name="allow" id="allow" checked="checked" v-model="allow" @change="check_allow">
                            <label>同意”美多商城用户使用协议“</label>
                            <span class="error_tip" v-show="error_allow">请勾选用户协议</span>
                        </li>
                        <li class="reg_sub">
                            <input type="submit" value="注 册">
                        </li>
                    </ul>
                    </form>
                </div>

            </div>

        </div>

        <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div>
            <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888    京ICP备*******8号</p>
        </div>
    </div>
{#<script type="text/javascript" src="{{ static('js/register.js') }}"></script>#}
</body>
</html>